<template>
  <div class="mod-demo-ueditor">
    <!-- <el-alert
      title="提示："
      type="warning"
      :closable="false">
      <div>
        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
        <p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
      </div>
    </el-alert> -->

    <script
      :id="ueId"
      class="ueditor-box"
      type="text/plain"
      style="width: 100%; height: 260px"
    ></script>

    <!-- 获取内容 -->
    <el-dialog
      title="内容"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      v-model="ueContent"
    >
      {{ ueContent }}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ueditor from "ueditor";
export default {
  name: "ueditor",

  data() {
    return {
      ue: null,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      ueContent: "",
      dialogVisible: false,
    };
  },
  mounted() {
    this.ue = ueditor.getEditor(this.ueId, {
      // serverUrl: '', // 服务器统一请求接口路径
      zIndex: 3000,
    });
  },

  methods: {
    getContent() {
      return this.ueContent;
      // this.ue.ready(() => {
      //   this.ueContent = this.ue.getContent();
      //   return this.ueContent;
      // });
    },
    setContent(content) {
      this.ue.ready(() => {
        this.ueContent = content;
        this.ue.setContent(content);
      });
    },
    // setContent(content) {
    // this.ue.ready(() => {
    //   this.ue.setContent("Hello World!!!!");
    // })
    // this.ue.ready(() => {
    //   this.ue.setContent(content);
    // });
    // },
  },
};
</script>

<style lang="scss">
.mod-demo-ueditor {
  position: relative;
  z-index: 510;
  > .el-alert {
    margin-bottom: 10px;
  }
}
</style>
